<template>
  <div>
    <el-form ref="ruleForm" label-position="right" size="small" label-width="110px" class="base-search-more">
       <el-row>
        <el-col :span="5">
          <el-form-item label="用户名称">
            <el-input style="width: 100%" placeholder="搜索用户名称" v-model="params.realname" clearable />
          </el-form-item>
        </el-col>
        <el-col :span="5">
          <el-form-item label="用户手机号">
            <el-input style="width: 100%" placeholder="搜索手机号" v-model="params.mobile" clearable />
          </el-form-item>
        </el-col>
        <el-col :span="5">
          <el-form-item label="所属部门">
            <el-select style="width:100%" v-model="params.rid" filterable default-first-option placeholder="--区域--">
              <el-option v-for="item in roleList" :key="item.rid" :label="item.rname"
                         :value="item.rid"></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="9" style="text-align: right">
          <el-form-item>
            <el-button type="primary" icon="el-icon-search" @click="handleSizeChange(10)">查询</el-button>
            <el-button type="primary" plain icon="el-icon-plus" size="small" @click="handleClickEdit(1)">新增角色
            </el-button>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
    <div class="base-table-wrap">
      <el-table :data="tableData.list" stripe style="width: 100%">
        <el-table-column prop="realname" label="用户名" min-width="140" align="center"></el-table-column>
        <el-table-column prop="mobile" label="手机号" min-width="140" align="center"></el-table-column>
        <el-table-column prop="rname" label="所属部门" min-width="140" align="center"></el-table-column>
        <el-table-column label="修改时间" min-width="180" align="center">
          <template slot-scope="scope">
            {{scope.row.modifytime?scope.row.modifytime:scope.row.createtime}}
          </template>
        </el-table-column>
        <el-table-column fixed="right" label="操作" width="120" align='center'>
          <template slot-scope="scope">
            <el-button class="el-text-check" @click="handleClickEdit(2,scope.row)" type="text" size="mini">编辑</el-button>
           <!-- <el-button @click="addUser(scope.row)" type="text" style="color:#f56c6c" size="mini">删除</el-button>-->
          </template>
        </el-table-column>
      </el-table>
      <!-- 复制 el-table v-loading  v-loading无法快速响应 所有自定义 -->
      <div class="base-directives-loading" v-show="isloadingTable">
        <div class="el-loading-spinner">
          <svg viewBox="25 25 50 50" class="circular">
            <circle cx="50" cy="50" r="20" fill="none" class="path"></circle>
          </svg>
        </div>
      </div>
      <div class="base-pagination clearfix">
        <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
                       :current-page.sync="newPage" :pageSize="pageSize"
                       :page-sizes="[10, 20, 30, 40]" background layout="total,sizes, prev, pager, next, jumper"
                       :total="tableData.total">
        </el-pagination>
      </div>
    </div>

    <el-dialog :title="addOrEdit+'角色'" v-dialogDrag :visible.sync="dialogTableVisible" width="800px" height="500px"
               :close-on-press-escap="true">
      <el-form :model="form" ref="ruleForm" label-width="100px"  size="small">

        <el-form-item label="角色名称" prop="realname" :rules="[{ required: true, message: '名称未填', trigger: 'blur' }]">
          <el-input v-model="form.realname" placeholder="输入部门的角色名称"></el-input>
        </el-form-item>

        <el-form-item label="手机号" prop="mobile" :rules="[{required: true, message: '商家电话未填写' }]">
          <el-input type="number" v-model.number="form.mobile" placeholder="输入手机号" />
        </el-form-item>

        <el-form-item label="分配部门" prop="rid"
                      :rules="[{required: true, message: '请选择部门', trigger: 'change' }]">
          <div class="right">
            <div class="head flex">
              <span class="st1">#</span>
              <span class="st2">部门名称</span>
              <span class="st3">描述</span>
            </div>
            <ul>
              <li class="flex-row" v-for="item in roleList" :key="item.rid">
                <el-radio v-model="form.rid" :label="item.rid">{{item.rname}}</el-radio>
                <span class="st4 text-over">{{item.info}}</span>
              </li>
            </ul>
          </div>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" :loading="isloadingUser" @click="submitForm('ruleForm')">保存</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>
  </div>
</template>
<script>
  export default {
    data() {
      return {
        addOrEdit: '添加', //添加 修改文本提示
        isloadingUser: false, //保存用户
        isloadingTable: false, //表单等待
        editId: '', //被编辑用户的ID
        form: {  //新增或修改角色
          realname: '',
          mobile: '',
          rid: '',
        },
        roleList: [], //部门列表
        dialogTableVisible: false, //对话框
        typeSearch: '1', //控制搜索用户名称或手机号
        params: { //表格查询
          page: 0,
          size: 10,
          realname: '',
          mobile: '',
        },
        tableData: {},  //表单数据
        newPage: 1, //默认
        pageSize: 10  //分页数量
      }
    },
    methods: {
      handleClickEdit(type, row) {  //打开对话框，开始新增
        if (type == 1) {
          this.addOrEdit = '添加'
          this.editId = ''
          this.form.realname = ''
          this.form.mobile = ''
          this.form.rid = ''
          this.dialogTableVisible = true
        } else if (type == 2) {
          this.addOrEdit = '修改'
          this.editId = row.id
          this.form.rid = row.rid ? row.rid : ''
          this.form.realname = row.username ? row.realname.toString() : ''
          this.form.mobile = row.mobile ? row.mobile.toString() : ''
          this.dialogTableVisible = true
        }
      },
      getTableList() {  //获取用户数据
        this.isloadingTable = true
        const params = { ...this.params }
        this.$http.get('/server/user/list?' + this.qs.stringify(params)).then(res => {
          if (res.data.success) {
            this.tableData = res.data.data
          }
        }).finally(() => { this.isloadingTable = false })
      },
      getRoleList() { //获取所有部门
        this.isloadingTable = true
        this.$http.get('/server/role/select', {headers: {isCancel: true}}).then(res => {
          if (res.data.success) {
            this.roleList = res.data.data
          }
        }).finally(() => { this.isloadingTable = false })
      },
      submitForm(formName) { //新增和保存广告
        this.$refs[formName].validate((valid) => {
          if (valid) {
            const params = { ...this.form }
            this.isloadingUser = true
            if (this.editId) {
              params.id = this.editId
              this.$http.post('/server/user/update', JSON.stringify(params)).then(res => {
                if (res.data.success) {
                  this.$message({type: 'success', message: '修改用户成功！'})
                  this.dialogTableVisible = false
                  this.getTableList()
                }
              }).finally(() => { this.isloadingUser = false })
            } else {
              this.$http.post('/server/user/save', JSON.stringify(params)).then(res => {
                if (res.data.success) {
                  this.$message({type: 'success', message: '新增用户成功！'})
                  this.dialogTableVisible = false
                  this.getTableList()
                }
              }).finally(() => { this.isloadingUser = false })
            }
          } else {
            this.$message.error('有不合法或未填写的内容，请检查！')
            return false
          }
        })
      },
      handleCurrentChange(page) {//切换分页
        this.params.page = page - 1
        this.getTableList()
      },
      handleSizeChange(size) {  //切换条数
        this.params.size = size
        this.pageSize = size
        this.newPage = 1
        this.params.page = 0
        this.getTableList()
      }
    },
    mounted() {
      this.getTableList()
      this.getRoleList()
    }
  }

</script>
<style scoped>
  .right {
    flex: 1;
    border: 1px solid #e2e2e2;
  }

  .right .head {
    height: 30px;
    line-height: 30px;
    padding-left: 15px;
    background: #eff0f5;
    border-bottom: 1px solid #e2e2e2;
  }

  .right .head span {
    color: #01a0e1;
    font-weight: 600;
  }

  .right .head span.st1 {
    width: 20px;
  }

  .right .head span.st2 {
    width: 180px;
  }

  .right .head span.st3 {
    flex: 1;
  }

  .right ul {
    max-height: 380px;
    overflow-y: auto;
  }

  .right ul li {
    padding: 0 10px;
    height: 30px;
    line-height: 30px;
    border-bottom: 1px solid #e2e2e2;
  }

  .right ul li .el-radio {
    width: 200px;
    line-height: 30px;
  }

  .right ul li:last-child {
    border-bottom: none;
  }

  .right ul li .st4 {
    width: 450px;
    height: 30px;
    overflow: hidden;
    color: #909399;
  }
</style>
